<template>
  <el-row class="login-container">
    <el-col :lg="16" :md="12" class="left">
      <div>
        <div class="welcome">欢迎光临</div>
        <div class="welcome-remark">
          基于 Vue3+ElementPlus+WindiCss 的商城后台管理系统
        </div>
      </div>
    </el-col>
    <el-col :lg="8" :md="12" class="right">
      <h1 class="title">请登录</h1>
      <span class="title-remark">账号密码登录</span>
      <el-form ref="formRef" :model="form" :rules="rules" class="form">
        <el-form-item prop="username">
          <el-input v-model="form.username" placeholder="请输入账号">
            <template #prefix>
              <el-icon><User /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="form.password"
            placeholder="请输入密码"
            type="password"
            @change="onSubmit"
          >
            <template #prefix>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            round
            color="#D7AE46"
            class="w-[250px]"
            @click="onSubmit"
            :loading="loading"
            >登 录</el-button
          >
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref, reactive } from 'vue'
// import { login, getinfo } from '@/api/manager'
// import { ElNotification } from 'element-plus'
import { toast } from '@/composables/util'
import { useRouter } from 'vue-router'
// import { useCookies } from '@vueuse/integrations/useCookies'
// import { setToken } from '@/composables/auth'
import { useStore } from 'vuex'

const store = useStore()
const router = useRouter()
const form = reactive({
  // username: '',
  // password: ''
  // 自动输入密码
  username: 'admin',
  password: 'admin'
})
const loading = ref(false)
// 表单验证
const rules = {
  username: [
    {
      required: true,
      message: '请输入账号',
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur'
    }
  ]
}

// 登录按钮
const formRef = ref(null)
const onSubmit = () => {
  formRef.value.validate(valid => {
    if (!valid) {
      // 提示填写账号密码
      // ElNotification({
      //   title: '登录失败',
      //   message: '请填写账号和密码',
      //   type: 'error',
      //   duration: 2000
      // })
      toast('登录失败', '请填写账号和密码', 'error')
    } else {
      loading.value = true

      store
        .dispatch('USER_LOGIN', form)
        // 登录方法（已优化到vuex中）
        // login(form.username, form.password)
        .then(res => {
          // 提示成功
          // ElNotification({
          //   title: '登录成功',
          //   message: '恭喜登录成功🥳',
          //   type: 'success',
          //   duration: 2000
          // })
          toast('登录成功', '恭喜登录成功🥳', 'success')
          // 存储token（已优化到响应拦截器-->已优化到vuex中）
          // const cookie = useCookies()
          // cookie.set('admin-token', res.token)
          // setToken(res.token)

          // 获取用户相关信息（已优化到路由守卫）
          // getinfo().then(res2 => {
          //   store.commit('SET_USERINFO', res2)
          //   console.log(res2)
          // })

          // 跳转至首页
          router.push('/')
        })
        .finally(() => (loading.value = false))
      // 提示失败（已优化到响应拦截器）
      // .catch(err => {
      //   ElNotification({
      //     title: '登录失败',
      //     message: err.response.data.msg || '请求失败',
      //     type: 'error',
      //     duration: 2000
      //   })
      // })
    }
  })
}
</script>

<style lang="scss" scoped>
.login-container {
  @apply min-h-screen;
  background-color: #d7ae46;
  .left {
    @apply flex flex-col items-center justify-center;
    .welcome {
      @apply font-bold text-5xl text-light-50 mb-4;
    }
    .welcome-remark {
      @apply text-gray-200 text-sm;
    }
  }
  .right {
    @apply bg-light-50 flex flex-col items-center justify-center;
    .title {
      @apply text-3xl font-bold text-gray-800;
    }
    .title-remark {
      @apply my-5 font-semibold text-gray-400;
    }
    .form {
      @apply w-[250px];
    }
  }
}
</style>
